<!--  -->
<template>
  <div>
    <Form :model="formData"
          label-position="left"
          :label-width="100"
          :rules="ruleInline">
      <!-- 用户信息 -->
      <div class="table-title">
        <span class="title-text">用户信息</span>
      </div>
      <div class="form1">
        <div class="formitem">
          <FormItem label="姓名"
                    prop="idname">
            <i-input v-model="formData.idname"
                     size="large"
                     :disabled="true"></i-input>
          </FormItem>
          <FormItem label="性别"
                    prop="sex">
            <el-radio v-model="formData.sex"
                      label="1">男</el-radio>
            <el-radio v-model="formData.sex"
                      label="0">女</el-radio>
          </FormItem>
        </div>
        <div class="formitem">

          <FormItem label="证件号码"
                    prop="idnumber">
            <i-input v-model="formData.idnumber"
                     size="large"
                     :disabled="true"></i-input>
          </FormItem>
          <FormItem label="手机号码"
                    prop="iphone">
            <i-input v-model="formData.iphone"
                     size="large"></i-input>
          </FormItem>

        </div>
        <div class="formitem">
          <FormItem label="邮箱地址"
                    prop="email">
            <i-input v-model="formData.email"
                     size="large"></i-input>
          </FormItem>
        </div>

      </div>
      <!-- 账号信息 -->
      <div class="table-title">
        <span class="title-text">账号信息</span>
      </div>
      <div class="form2">
        <div class="formitem">
          <FormItem label="用户名"
                    prop="name">
            <i-input v-model="formData.name"
                     size="large"></i-input>
          </FormItem>
          <FormItem label="账号"
                    prop="username">
            <i-input v-model="formData.username"
                     size="large"
                     :disabled="true"></i-input>
          </FormItem>
        </div>
        <div class="formitem">
          <FormItem label="密码"
                    prop="password">
            <i-input v-model="formData.password"
                     size="large"></i-input>
          </FormItem>
          <!-- <FormItem label="头像"
                    prop="phone">
            <i-input v-model="formData.phone"
                     size="large"></i-input>
          </FormItem> -->
        </div>
      </div>
      <!-- 企业信息 -->
      <div v-if="this.$store.getters.userinfo.level === 1">
        <div class="table-title">
          <span class="title-text">企业信息</span>
        </div>
        <div class="form3">
          <div class="formitem">
            <FormItem label="企业全称"
                      prop="company_name">
              <i-input v-model="formData.company_name"
                       size="large"
                       :disabled="true"></i-input>
            </FormItem>
            <FormItem label="企业法人"
                      prop="company_user">
              <i-input v-model="formData.company_user"
                       size="large"
                       :disabled="true"></i-input>
            </FormItem>
          </div>
          <div class="formitem">

            <FormItem label="企业营业证号"
                      prop="company_idnumber">
              <i-input v-model="formData.company_idnumber"
                       size="large"
                       :disabled="true"></i-input>
            </FormItem>
            <FormItem label="企业电话"
                      prop="company_iphone">
              <i-input v-model="formData.company_iphone"
                       size="large"></i-input>
            </FormItem>
          </div>
          <div class="formitem">
            <FormItem label="企业地址"
                      prop="company_address">
              <i-input v-model="formData.company_address"
                       size="large"></i-input>
            </FormItem>
            <FormItem label="业务人"
                      prop="company_finance_user">
              <i-input v-model="formData.company_finance_user"
                       size="large"></i-input>
            </FormItem>
          </div>
          <div class="formitem">
            <FormItem label="传真"
                      prop="company_fax">
              <i-input v-model="formData.company_fax"
                       size="large"></i-input>
            </FormItem>
            <FormItem label="法人电话"
                      prop="company_user_iphone">
              <i-input v-model="formData.company_user_iphone"
                       size="large"></i-input>
            </FormItem>
          </div>
        </div>
      </div>
      <!-- 保存按钮 -->
      <el-button type="primary"
                 class="onsubmit"
                 @click="onSubmit">保存修改</el-button>
      <!-- <el-result v-show="isshowed === 1"
                 icon="success"
                 title="注册认证成功"
                 subTitle="欢迎企业加入">
      </el-result> -->
    </Form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        // 用户id
        users_id: this.$store.getters.userinfo.users_id,

        idname: this.$store.getters.userinfo.idname,
        sex: this.$store.getters.userinfo.sex.toString(),
        idnumber: this.$store.getters.userinfo.idnumber,
        iphone: this.$store.getters.userinfo.iphone,
        email: this.$store.getters.userinfo.email,
        name: this.$store.getters.userinfo.name,
        username: this.$store.getters.userinfo.username,
        password: this.$store.getters.userinfo.password,
        // img:this.$store.getters.userinfo.img
        // 企业信息
        company_name: this.$store.getters.userinfo.company_name,
        company_user: this.$store.getters.userinfo.company_user,
        company_idnumber: this.$store.getters.userinfo.company_idnumber,
        company_iphone: this.$store.getters.userinfo.company_iphone,
        company_address: this.$store.getters.userinfo.company_address,
        company_finance_user: this.$store.getters.userinfo.company_finance_user,
        company_fax: this.$store.getters.userinfo.company_fax,
        company_user_iphone: this.$store.getters.userinfo.company_user_iphone,
      },
      // isshowed: 0,
      ruleInline: {
        iphone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur' }
        ],
        // @之前必须有内容且只能是字母（大小写）、数字、下划线(_)、减号（-）、点（.）
        // @和最后一个点（.）之间必须有内容且只能是字母（大小写）、数字、点（.）、减号（-），且两个点不能挨着
        // 最后一个点（.）之后必须有内容且内容只能是字母（大小写）、数字且长度为大于等于2个字节，小于等于6个字节
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'string', pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '邮箱格式格式出错', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '密码长度为5~15', trigger: 'blur' }
        ],
        company_iphone: [
          { required: true, message: '请输入企业电话', trigger: 'blur' },
          // { type: 'string', pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '邮箱格式格式出错', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '密码长度为5~15', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('保存修改：', this.formData)
      const api = '/updateuserinfo'
      this.$axios.post(api, this.formData)
        .then(res => {
          console.log(res.status)
          if (res.status === 200) {
            this.$message({
              duration: 2000,
              type: 'success',
              message: '修改成功!  2秒后自动重新登陆...'
            });
            setTimeout(() => {
              this.$router.push('/');
            }, 2000)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
  }
}
</script>

<style>
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.form1,
.form2,
.form3 {
  padding-top: 20px;
}
.formitem {
  display: flex;
  padding: 0 20px;
}
.ivu-form-item {
  padding-right: 60px;
}
/* 保存按钮 */
.onsubmit {
  position: absolute;
  left: 50%;
}
</style>
